<template>
    <div>
        <div class="table-data">
            <div class="search-box">
                <el-input size="small" v-model="searchMap.username" placeholder="姓名"></el-input>
                <el-input size="small" v-model="searchMap.mobile" placeholder="手机号"></el-input>
                <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    v-loading="loading"
                    element-loading-text="正在加载"
                    element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass"
                    style="width:100%" class="table-box">
                <el-table-column label="序号" prop="id"></el-table-column>
                <el-table-column label="用户信息" prop="title">
                    <template slot-scope="scope" v-if="scope.row.wxUser">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.wxUser.wx_avator"></el-image>
                        <span>{{scope.row.wxUser.wx_nickname}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="员工姓名" prop="username">
                    <template slot-scope="scope" v-if="scope.row.personnel">
                        <span>{{scope.row.personnel.username}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="mobile">
                    <template slot-scope="scope" v-if="scope.row.personnel">
                        <span>{{scope.row.personnel.mobile}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="申请金额" prop="amount"></el-table-column>
                <el-table-column label="实际放款金额" prop="actual_amount"></el-table-column>
                <el-table-column label="申请说明" prop="remark"></el-table-column>
                <el-table-column label="状态" prop="status_str"></el-table-column>
                <el-table-column label="申请时间" prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" v-if="!scope.row.status">
                        <el-button size="mini" type="primary" @click="handleAdd(scope.row, 1)">推送</el-button>
                        <el-button size="mini"  type="" @click="handleAdd(scope.row, 2)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages" ref="page-box">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10,30,50]"
                        :page-size="size"
                        layout="total,sizes,prev,pager,next,jumper"
                        :total="total"
                ></el-pagination>
            </div>
        </div>
        <EditDialog :isEdit="isEdit" :isAdd="isAdd" :key="timer" :form="formData" @closeDialog="closeDialog"></EditDialog>
    </div>
</template>

<script lang="ts">

    import {Component, Vue, Provide, Prop, Watch} from "vue-property-decorator";

    import staffManage from "@/api/staffManag";
    import EditDialog from "./personnelAmountDialog.vue";

    @Component({
        components: { EditDialog }
    })
    export default class activityManageClass extends Vue {

        @Provide() tableData: any = []; // 表格数据
        @Provide() page: number = 1; // 当前page
        @Provide() size: number = 10; // 请求数据的个数 默认5
        @Provide() total: number = 0; // 总数据条数
        @Provide() loading: Boolean = true; // 是否显示加载图标
        @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
        @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
        @Provide() timer: any = '';

        @Provide() formData: any = { // 提交数据信息
            id: "",
            status: "",
            amount: "",
            reason: "",
        };
        @Provide() searchMap: any = { // 搜索内容
            username: '',
            mobile: ''
        };

        closeDialog() {
            this.isAdd = false;
            this.isEdit = false;
            this.loadData();
        }

        handleSearch() {
            // 点击搜索
            this.page = 1;
            this.loadData();
        }

        headClass() {
            return "text-align: center;background:#eef1f6;";
        }

        created() {
            this.loadData();
        }

        loadData() {
            staffManage.employeeAmountList(this.page, this.size, this.searchMap)
                .then((res: any) => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data.list;
                        this.total = res.data.data.total;
                        this.loading = false
                    }
                });
        }

        handleSizeChange(val: number): void {
            this.size = val;
            this.page = 1;
            this.loadData();
        }

        handleCurrentChange(val: number): void {
            this.page = val;
            this.loadData();
        }

        // 新增
        handleAdd(row, status) {
            this.isAdd = true;
            this.isEdit = true;
            this.formData = {id: row.id, status: status, reason: '', amount: row.amount}
        }
    }
</script>

<style lang="scss" scoped>
    .el-range-editor.el-input__inner {
        margin-right: 10px
    }

    .add {
        padding: 10px;

    }

    .el-input {
        width: 198px;
    }

    .el-button {
        margin-left: 10px;
        margin-top: 10px;
    }

</style>